﻿@using Smartstore.Web.Models.Customers;

@model CustomerInfoModel

@{
    Assets.AppendTitleParts(T("PageTitle.Account"));

    Layout = "_MyAccount";
    ViewBag.PageClassToken = "info";
    ViewBag.PageTitle = T("Account.CustomerInfo").Value;
}

<form asp-action="Info" class="form-horizontal" method="post">

    <div asp-validation-summary="ModelOnly"></div>

    <zone name="customer_info_top"></zone>

    <fieldset class="content-group">
        <legend><span>@T("Account.YourPersonalDetails")</span></legend>

        <div sm-if="Model.GenderEnabled" class="form-group row">
            <label class="col-lg-3 col-form-label">@T("Account.Fields.Gender")</label>
            <div class="col-lg-9 form-inline">
                <div class="form-check form-check-inline">
                    <input type="radio" asp-for="Gender" sm-ignore-label="true" class="form-check-input" id="gender-male" value="M" attr-checked='(Model.Gender == "M", "checked")' />
                    <label class="form-check-label" for="gender-male">@T("Account.Fields.Gender.Male")</label>
                </div>
                <div class="form-check form-check-inline">
                    <input type="radio" asp-for="Gender" sm-ignore-label="true" class="form-check-input" id="gender-female" value="F" attr-checked='(Model.Gender == "F", "checked")' />
                    <label class="form-check-label" for="gender-female">@T("Account.Fields.Gender.Female")</label>
                </div>
            </div>
        </div>

        <div sm-if="Model.TitleEnabled" class="form-group row">
            <label asp-for="Title" class="col-lg-3 col-form-label"></label>
            <div class="col-lg-9">
                <input asp-for="Title" />
                <span asp-validation-for="Title"></span>
            </div>
        </div>
        <div class="form-group row">
            <label asp-for="FirstName" class="col-lg-3 col-form-label" attr-class='(Model.FirstNameRequired, "required")'></label>
            <div class="col-lg-9">
                <input asp-for="FirstName" sm-required="Model.FirstNameRequired" />
                <span asp-validation-for="FirstName"></span>
            </div>
        </div>
        <div class="form-group row">
            <label asp-for="LastName" class="col-lg-3 col-form-label" attr-class='(Model.LastNameRequired, "required")'></label>
            <div class="col-lg-9">
                <input asp-for="LastName" sm-required="Model.LastNameRequired" />
                <span asp-validation-for="LastName"></span>
            </div>
        </div>

        <div sm-if="Model.DateOfBirthEnabled" class="form-group row">
            <div class="col-lg-3">
                <label asp-for="DateOfBirthDay" class="col-form-label"></label>
            </div>
            <div class="col-lg-9">
                <triple-date-picker day-name="@Html.NameFor(x => x.DateOfBirthDay)" month-name="@Html.NameFor(x => x.DateOfBirthMonth)" year-name="@Html.NameFor(x => x.DateOfBirthYear)"
                                    day="@Model.DateOfBirthDay" month="@Model.DateOfBirthMonth" year="@Model.DateOfBirthYear"
                                    begin-year="DateTime.Now.Year - 110" end-year="DateTime.Now.Year" disabled="false" />

                <span asp-validation-for="DateOfBirthDay"></span>
                <span asp-validation-for="DateOfBirthMonth"></span>
                <span asp-validation-for="DateOfBirthYear"></span>
            </div>
        </div>

        <div class="form-group row">
            <label asp-for="Email" class="col-lg-3 col-form-label required"></label>
            <div class="col-lg-9">
                <input asp-for="Email" sm-required="true" />
                <span asp-validation-for="Email"></span>
            </div>
        </div>

        <div sm-if="Model.UsernamesEnabled" class="form-group row">
            <label asp-for="Username" class="col-lg-3 col-form-label" attr-class='(Model.AllowUsersToChangeUsernames, "required")'></label>
            @if (Model.AllowUsersToChangeUsernames)
            {
                <div class="col-lg-9">
                    @if (Model.CheckUsernameAvailabilityEnabled)
                    {
                        <div class="input-group">
                            <input asp-for="Username" sm-required="true" />
                            <partial name="_CheckUsernameAvailability" />
                        </div>
                    }
                    else
                    {
                        <input asp-for="Username" sm-required="true" />
                    }
                    <span asp-validation-for="Username"></span>
                </div>
            }
            else
            {
                <div class="col-lg-9">
                    <div class="form-control-plaintext">@Model.Username</div>
                </div>
            }
        </div>

        <div sm-if="Model.DisplayCustomerNumber" class="form-group row">
            <label asp-for="CustomerNumber" class="col-lg-3 col-form-label"></label>
            <div class="col-lg-9">
                <input asp-for="CustomerNumber" attr-readonly='(!Model.CustomerNumberEnabled, "")' />
                <span asp-validation-for="CustomerNumber"></span>
            </div>
        </div>
    </fieldset>

    <fieldset sm-if="Model.AssociatedExternalAuthRecords.Count > 0" class="content-group">
        <legend><span>@T("Account.AssociatedExternalAuth")</span></legend>

        <div class="table-responsive">
            <table class="table table-hover border-top-0">
                <thead>
                    <tr>
                        <th class="border-top-0">
                            @T("Account.AssociatedExternalAuth.AuthMethodName")
                        </th>
                        <th class="border-top-0">
                            @T("Account.AssociatedExternalAuth.Email")
                        </th>
                        <th class="border-top-0">
                            @T("Account.AssociatedExternalAuth.ExternalIdentifier")
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.AssociatedExternalAuthRecords)
                    {
                        <tr>
                            <td>@item.AuthMethodName</td>
                            <td>@item.Email</td>
                            <td>@item.ExternalIdentifier</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </fieldset>

    <fieldset sm-if="Model.CompanyEnabled || Model.DisplayVatNumber" class="content-group">
        <legend><span>@T("Account.CompanyDetails")</span></legend>

        <div sm-if="Model.CompanyEnabled" class="form-group row">
            <label asp-for="Company" class="col-lg-3 col-form-label" attr-class='(Model.CompanyRequired, "required")'></label>
            <div class="col-lg-9">
                <input asp-for="Company" sm-required="Model.CompanyRequired" />
                <span asp-validation-for="Company"></span>
            </div>
        </div>
        <div sm-if="Model.DisplayVatNumber" class="form-group row">
            <label asp-for="VatNumber" class="col-lg-3 col-form-label"></label>
            <div class="col-lg-9">
                <div class="input-group">
                    <input asp-for="VatNumber" />
                    <div class="input-group-append"><span class="input-group-text">@Model.VatNumberStatusNote</span></div>
                </div>
                <div class="form-text text-muted vat-note">@T("Account.Fields.VatNumber.Note")</div>
            </div>
        </div>
    </fieldset>

    <fieldset sm-if="Model.StreetAddressEnabled || Model.StreetAddress2Enabled || Model.ZipPostalCodeEnabled || Model.CityEnabled || Model.CountryEnabled" class="content-group">
        <legend><span>@T("Account.YourAddress")</span></legend>

        <div sm-if="Model.StreetAddressEnabled" class="form-group row">
            <label asp-for="StreetAddress" class="col-lg-3 col-form-label" attr-class='(Model.StreetAddressRequired, "required")'></label>
            <div class="col-lg-9">
                <input asp-for="StreetAddress" sm-required="Model.StreetAddressRequired" />
                <span asp-validation-for="StreetAddress"></span>
            </div>
        </div>
        <div sm-if="Model.StreetAddress2Enabled" class="form-group row">
            <label asp-for="StreetAddress2" class="col-lg-3 col-form-label" attr-class='(Model.StreetAddress2Required, "required")'></label>
            <div class="col-lg-9">
                <input asp-for="StreetAddress2" sm-required="Model.StreetAddress2Required" />
                <span asp-validation-for="StreetAddress2"></span>
            </div>
        </div>
        <div sm-if="Model.ZipPostalCodeEnabled" class="form-group row">
            <label asp-for="ZipPostalCode" class="col-lg-3 col-form-label" attr-class='(Model.ZipPostalCodeRequired, "required")'></label>
            <div class="col-lg-9">
                <input asp-for="ZipPostalCode" sm-required="Model.ZipPostalCodeRequired" />
                <span asp-validation-for="ZipPostalCode"></span>
            </div>
        </div>
        <div sm-if="Model.CityEnabled" class="form-group row">
            <label asp-for="City" class="col-lg-3 col-form-label" attr-class='(Model.CityRequired, "required")'></label>
            <div class="col-lg-9">
                <input asp-for="City" sm-required="Model.CityRequired" />
                <span asp-validation-for="City"></span>
            </div>
        </div>

        <div sm-if="Model.CountryEnabled" class="form-group row">
            <label asp-for="CountryId" class="col-lg-3 col-form-label"></label>
            <div class="col-lg-9">
                @{ 
                    var countrySelectorViewData = new
                    {
                        nullable = true,
                        placeholder = T("Address.SelectCountry").Value,
                        includeHidden = false,
                        storeId = CommonServices.StoreContext.CurrentStore.Id,
                    };
                }
                <editor asp-for="CountryId"
                        class="country-input country-selector"
                        asp-template="Countries"
                        asp-additional-viewdata='countrySelectorViewData'
                        data-region-control-selector="#@Html.IdFor(x => x.StateProvinceId)"
                        data-states-ajax-url="@Url.Action("StatesByCountryId", "Common", new { area = string.Empty })"
                        data-addEmptyStateIfRequired="true" />
                <span asp-validation-for="CountryId"></span>
            </div>
        </div>

        <div sm-if="Model.CountryEnabled && Model.StateProvinceEnabled" class="form-group row">
            <label asp-for="StateProvinceId" class="col-lg-3 col-form-label"></label>
            <div class="col-lg-9">
                <select asp-for="StateProvinceId" asp-items="ViewBag.AvailableStates"></select>
                <span asp-validation-for="StateProvinceId"></span>
            </div>
        </div>
    </fieldset>

    <fieldset sm-if="Model.PhoneEnabled || Model.FaxEnabled" class="content-group">
        <legend><span>@T("Account.YourContactInformation")</span></legend>
        <div sm-if="Model.PhoneEnabled" class="form-group row">
            <label asp-for="Phone" class="col-lg-3 col-form-label" attr-class='(Model.PhoneRequired, "required")'></label>
            <div class="col-lg-9">
                <input asp-for="Phone" sm-required="Model.PhoneRequired" />
                <span asp-validation-for="Phone"></span>
            </div>
        </div>
        <div sm-if="Model.FaxEnabled" class="form-group row">
            <label asp-for="Fax" class="col-lg-3 col-form-label" attr-class='(Model.PhoneRequired, "required")'></label>
            <div class="col-lg-9">
                <input asp-for="Fax" sm-required="Model.FaxRequired" />
                <span asp-validation-for="Fax"></span>
            </div>
        </div>
    </fieldset>

    <fieldset sm-if="Model.NewsletterEnabled" class="content-group">
        <legend><span>@T("Account.Options")</span></legend>
        <div class="form-group row">
            <div class="col">
                <div class="form-check">
                    <input sm-ignore-label="true" sm-switch="false" asp-for="Newsletter" type="checkbox" class="form-check-input" />
                    <label class="form-check-label" for="Newsletter">
                        @Html.Raw(T("Account.Fields.Newsletter", await Url.TopicAsync("PrivacyInfo")))
                    </label>
                </div>
            </div>
        </div>
    </fieldset>

    <fieldset sm-if="Model.AllowCustomersToSetTimeZone" class="content-group">
        <legend><span>@T("Account.Preferences")</span></legend>
        <div class="form-group row">
            <label asp-for="TimeZoneId" class="col-lg-3 col-form-label"></label>
            <div class="col-lg-9">
                <select asp-for="TimeZoneId" asp-items="ViewBag.AvailableTimeZones"></select>
                <span asp-validation-for="TimeZoneId"></span>
            </div>
        </div>
    </fieldset>

    <zone name="customer_info_bottom"></zone>

    <div class="form-group row">
        <div class="col-12 text-muted">
            @T("Common.FormFields.Required.Hint")
        </div>
    </div>

    <div class="form-group row">
        <div class="col">
            <button type="submit" name="save-info-button" class="btn btn-primary btn-lg save-customer-info-button">
                <i class="fa fa-check"></i>
                <span>@T("Common.Save")</span>
            </button>
        </div>
    </div>
</form>